<!--
 * @Description: 
 * @Date: 2021-11-02 11:47:04
 * @LastEditTime: 2021-11-11 15:16:09
-->
<template>
  <div>
    <van-swipe autoplay="2000">
      <van-swipe-item>
        <img
          class="banner"
          src="./assets/banner/1.jpg"
          alt=""
        >
      </van-swipe-item>
      <van-swipe-item>
        <img
          class="banner"
          src="./assets/banner/2.jpg"
          alt=""
        >
      </van-swipe-item>
      <van-swipe-item>
        <img
          class="banner"
          src="./assets/banner/3.jpg"
          alt=""
        >
      </van-swipe-item>
      <template #indicator="{ active }">
        <div class="custom-indicator">{{ active + 1 }}/3</div>
      </template>
    </van-swipe>
    <van-grid :gutter="10">
      <van-grid-item
        v-for="item in listData"
        :key="item.value"
        :icon="item.icon"
        :text="item.title"
        @click="todetail(item.value)"
      />
    </van-grid>
    <van-divider>首页</van-divider>
    <router-view></router-view>
  </div>
</template>
<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    let list = [
      { title: "历史今天", value: 1, icon: "notes-o" },
      { title: "全景图", value: 2, icon: "user-circle-o" },
      { title: "新闻头条", value: 3, icon: "newspaper-o" },
      { title: "气象预警", value: 4, icon: "bulb-o" },
      { title: "敬请期待", value: 5, icon: "ellipsis" },
      { title: "敬请期待", value: 6, icon: "ellipsis" },
    ];
    const router = useRouter();
    const listData = reactive(list);
    return {
      listData,
      router,
    };
  },
  methods: {
    todetail(value) {
      switch (value) {
        case 1:
          this.$router.push({ path: "/home/history" });
          break;
        case 2:
          this.$router.push({ path: "/home/VR" });
          break;
        case 3:
          this.$router.push({ path: "/home/journalism" });
          break;
      }
    },
  },
};
</script>
<style scoped>
.banner {
  width: 100%;
  max-height: 250px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>